<template>
  <div class="container">
    <h3>vue+openlayers: </h3>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import LineString from 'ol/geom/LineString';
import { Style, Stroke, Icon } from 'ol/style';
import XYZ from 'ol/source/XYZ';
export default {
  data() {
    return {
      map: null,
      coordinates: [
        [114.2924451828003, 30.548735055676342],
        [114.29841041564941, 30.543006308026428],
        [114.29866790771484, 30.53731418530321],
        [114.29763793945311, 30.530623666534726],
        [114.29145812988281, 30.526927049704433],
        [114.28613662719725, 30.528479645904042],
        [114.27154541015625, 30.50666709259759],
        [114.28184509277342, 30.49305949630156],
        [114.30931091308594, 30.500750980290693],
        [114.32304382324219, 30.51494904517773],
        [114.32785034179688, 30.525004753369974],
        [114.31686401367188, 30.534467998833467],
        [114.30107116699219, 30.517906714408557],
        [114.29557800292969, 30.513174400443376],
        [114.30107116699219, 30.491876137098675],
        [114.29969787597656, 30.484183951487754],
        [114.29008483886717, 30.4711650216242],
        [114.2749786376953, 30.47471581151385],
        [114.2633056640625, 30.484183951487754],
        [114.2523193359375, 30.49483450812004],
        [114.24819946289062, 30.517906714408557],
        [114.25506591796875, 30.538607878854556],
        [114.27566528320312, 30.54688710949595],
        [114.31137084960938, 30.554574334398687],
        [114.33334350585938, 30.547478456100688],
        [114.34364318847656, 30.53328514356082],
        [114.3402099609375, 30.50903343674927],
      ],
      myfeature: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let lineLayer = new VectorLayer({
        source: new VectorSource({
          features: [new Feature(new LineString(this.coordinates))]
        }),
        style: new Style({
          stroke: new Stroke({
            color: '#42b983',
            width: 10
          })
        })
      })
      let layer = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [layer, lineLayer],
        view: new View({
          center: [116.397411, 39.909186],
          zoom: 7,
          projection: 'EPSG:4326'
        })
      })
      this.myfeature = lineLayer.getSource().getFeatures()[0].getGeometry();
      this.fitView();
      
      this.drawArrow();
    },
    fitView() {
      let size = this.map.getSize();
      this.map.getView().fit(this.myfeature, {
        size: size,
        padding: [50, 50, 50, 50],
        maxZoom: 17
      })
    },
    // 在已有线段内绘制箭头
    drawArrow() {
      let line = this.myfeature;
      let lineCoords = line.getCoordinates();
      let start = lineCoords[0];
      let end = lineCoords[lineCoords.length - 1];
      let dx = end[0] - start[0];
      let dy = end[1] - start[1];
      let rotation = Math.atan2(dy, dx);
      let arrowCoords = [];
      arrowCoords.push(end);
      arrowCoords.push([end[0] - 20 * Math.cos(rotation - Math.PI / 6), end[1] - 20 * Math.sin(rotation - Math.PI / 6)]);
      arrowCoords.push([end[0] - 20 * Math.cos(rotation + Math.PI / 6), end[1] - 20 * Math.sin(rotation + Math.PI / 6)]);
      arrowCoords.push(end);
      let arrow = new Feature({
        geometry: new LineString(arrowCoords)
      });
      let arrowStyle = new Style({
        stroke: new Stroke({
          color: '#42b983',
          width: 10
        }),
        image: new Icon({
          src: require('../../assets/goutou.png'),
          anchor: [0.75, 0.5],
          rotateWithView: true,
          rotation: -rotation
        })
      });
      arrow.setStyle(arrowStyle);
      let arrowSource = new VectorSource({
        features: [arrow]
      });
      let arrowLayer = new VectorLayer({
        source: arrowSource
      });
      this.map.addLayer(arrowLayer);
    }
    
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 750px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 100%;
      height: 720px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>
